<template>
	<div class="unity-body-div boxrain" v-loading="loadingall" element-loading-background="rgba(0, 0, 0, 0.9)">
		<close @click.native="toClose" v-if="rain_p==''"></close>
		<!-- <div class="unity-body-center-right" :class="operationTips?'toleft':''" v-if="!operationTips">
			<div class="posi_title">
				<div class="">
					<div style="font-size: 24px;z-index:999;padding: 0 3vw;">
						洪水预报
					</div>
					<div class="  color-gradient-blue"
						style="width: 100%;height: 15px;border-radius: 6px;margin-top: -10px;"></div>
				</div>
			</div>
		</div> -->
		<div class=""
			style="display:flex;align-items: flex-start;justify-content: space-between;padding-top: 15px;padding-left: 29px;padding-right: 37px;box-sizing: border-box;width: 100%;">
			<div class="unity-body-center-left-top">
				<div class="  color-gradient-blue_device"
					style="width: 8px;height: 15px;border-radius: 2px;margin-right: 10px;"></div>
				<div class="" style="font-size: 18px;z-index:999">洪水预测</div>
			</div>

			<div class="rain"
				style="z-index: 99999999; display:flex;justify-content: flex-end;align-items: center;padding-right: 15px;">
				<el-form class="demo-form-inline indoor-scene-buzhou-list-form"
					style="display: flex;align-items: center;" :inline="true" @submit.native.prevent>

					<el-form-item label="" label-width="" style="z-index: 99999999;margin-bottom: 0px;">
						<el-select v-model="type" style="z-index: 99999999;width: 110px;height: 34px;"
							@change="choosetype()" :disabled="hasfrom" popper-class="selseclass">
							<el-option v-for="item in alltype" :key="item.id" :label="item.name" :value="item.id"
								style="z-index: 99999999">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="" label-width=""
						style="z-index: 99999999;margin-bottom: 0px;margin-right: 0px;margin-left: 10px;">
						<el-select v-model="rain_p" style="z-index: 99999999;width: 130px;height: 34px;"
							@change="searchList()" :disabled="hasfrom" popper-class="selseclass">
							<el-option v-for="item in choosep" :key="item.id" :label="item.name" :value="item.id"
								style="z-index: 99999999">
							</el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="24小时径流深(mm):" label-width="140px"
					style="z-index: 99999999;width: 100px;height: 34px;" v-if="type=='jls' ">
					<el-select v-model="rain_p" @change="" style="z-index: 99999999;" @change="searchList()">
		
						<el-option v-for="item in allp_jls" :key="item.id" :label="item.name" :value="item.id"
							style=";">
						</el-option>
					</el-select>
				</el-form-item> -->
				</el-form>
			</div>
		</div>
		<!-- v-loading="loadchart" element-loading-background="rgba(0, 0, 0, 0.0)" -->
		<div class="unity-body-center" style="padding: 0px  5vw;padding-top: 20px;position: relative;" v-if="closetips"
			element-loading-text="正在加载预测数据..." v-loading="loadingjz" element-loading-background="rgba(0, 0, 0, 0)">
			<div style="position: absolute;left: 0;top:0;right: 0;height:180px;display: flex;align-items: center;justify-content: center;padding-bottom: 20px;color: #FFFFFF;"
				v-if="rain_p==''">
				<!-- <div class="" style="position: absolute;left: 0;top:0;right: 0;bottom: 0;"> -->
				请选择预测类型
				<!-- </div> -->

			</div>

			<div class="chart" style="position: relative;" v-if="rain_p!=''&&loadchart">
				<div style="width:100%;height:200px;z-index:9;" ref='main1'></div>
			</div>

			<div class="chart2" style="position: relative;" v-if="rain_p!=''&&!loadchart">
				<div style="width:100%;height:200px;z-index:9;" ref='main2'></div>
			</div>
			<!-- <div class="chart" style="position: relative;" v-if="rain_p!=''&&!loadchart" >
				<div style="width:100%;height:200px;z-index:9;" ref='main2'></div>
			</div> -->
		</div>

		<!-- <div class="unity-body-center"
			style="height: 100%;padding: 20px  2.4vw;display: flex;align-items: center;justify-content: center;"
			v-if="!choosehs">
			<el-button type="primary" @click="choosetype('hs')" style="width: 300px;margin-bottom: 50px;">洪水频率
			</el-button>
			<el-button type="primary" @click="choosetype('jls')" style="width: 300px;margin-left: 0;">径流深</el-button>
		</div> -->

	</div>




	</div>





	<!-- </div> -->


</template>

<script>
	import {
		Message
	} from "element-ui";
	import StringUtils from "../../utils/string"
	import UnityIm from "../../utils/unityIm"
	import bigCenterTitle from "@/components/unityweb/big-center-title";
	import close from "@/components/unityweb/close";
	import back from "@/components/unityweb/back";
	import axios from 'axios'

	export default {
		name: "deviceSmall",
		components: {
			'big-center-title': bigCenterTitle,
			close,
			back
		},
		data() {
			return {
				loadchart: false,
				u_getVideoDetial: '',
				operationTips: false,
				choosehs: false,
				myplayer: null,
				appId: 'lc4f8f9576ada04180', //水系连通
				appSecret: 'd06df43f5f4e43e4bf3184a9561f29', //水系连通
				// appId: 'lc2368cda43106467b',//klp
				// appSecret: '431e679db19e4071949f853a609bca',//klp
				deviceId: '',
				time: '',
				nonce: '',
				nonce2: '',
				sign: '',
				sign2: '',
				id: '',
				accessToken: '',
				kitToken: '',
				parmas: '',
				ifsb: false,
				from: 'videoSurveillance',
				loading: false,
				loadingall: false,
				isfull: false,

				rainstormList: {
					// time: [],
					// flood: [],
					// instantFlood: [],
					// instantRain: [],
					// rain: []
				},
				rain_p: '',
				type: '',
				alltype: [{
						id: 2,
						name: '洪水频率'
					},
					{
						id: 1,
						name: '径流深'
					}
				],
				choosep: [],
				allp: [{
						id: 5,
						name: '二十年一遇'
					},
					{
						id: 2,
						name: '五十年一遇'
					}, {
						id: 1,
						name: '百年一遇'
					}, {
						id: 0.1,
						name: '千年一遇'
					},
					{
						id: 0.02,
						name: '五千年一遇'
					}, {
						id: 0.01,
						name: '万年一遇'
					}
				],
				allp_jls: [{
						id: 50,
						name: '50mm'
					},
					{
						id: 100,
						name: '100mm'
					}, {
						id: 150,
						name: '150mm'
					}, {
						id: 200,
						name: '200mm'
					}, {
						id: 250,
						name: '250mm'
					},
					{
						id: 300,
						name: '300mm'
					},
					{
						id: 350,
						name: '350mm'
					}
				],
				interval: 10,
				ifrain: false,
				loadingCompleted: false,
				key: 1,
				myChart: '',
				loadingjz: false,
				hasfrom: false,
				animation: true,
				closetips: true

			};
		},
		created() {
			var _this = this
			// this.parmas = {
			//   id: 188
			// }
			// this.u_getToken();

			// var appId = 'lc4f8f9576ada04180'
			// var appId = 'lc2368cda43106467b'//klp

			// this.getDetialcomplete()

		},
		mounted() {
			window.addEventListener('message', (event) => {
				//event.data获取传过来的数据
				let _obj = event.data;
				let method_name = _obj.methodName || '';
				let paramsStr = _obj.parameterData || '';
				let params = StringUtils.toJson(paramsStr);
				if (_obj.managerType == 'open') {
					this.openHandler(method_name, params)
				} else if (_obj.managerType == 'close') {

				} else if (_obj.managerType == 'simulation') {
					this.openHandler(method_name, params)
				}
			});
			if (window.vuplex) {
				this.addMessageListener15();
			} else {
				// 初始化侦听器
				window.addEventListener("vuplexready", this.addMessageListener15);
			}
			// setTimeout(()=>{
			// 	this.$nextTick(() => {
			//       this.createVideo()
			//     })
			// },1000)

		},
		beforeDestroy() {
			// location.reload();
		},
		methods: {

			addMessageListener15() {
				UnityIm.loadingCompletedfun((method_name, params) => {
					this.openHandler(method_name, params)
				});
			},

			//时间转换
			timezh(item) {
				const date = item ? new Date(item) : new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				minute = minute < 10 ? ('0' + minute) : minute;
				var second = date.getSeconds();
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d
			},
			//设备状态
			sbstate(item) {
				switch (item) {
					case "0":
						return '正常'
						break;
					case "1":
						return '异常'
						break;
					case "2":
						return '故障'
						break;
				}
			},
			openHandler(method_name, params) {
				var _this = this
				switch (method_name) {
					case 'rainsstorm':
						// _this.closetips = true
						// _this.type = parseInt(params.type) 
						_this.type = parseInt(params.type)
						if (_this.type == 2) {
							_this.choosep = JSON.parse(JSON.stringify(_this.allp))
						} else {
							_this.choosep = JSON.parse(JSON.stringify(_this.allp_jls))
						}
						_this.rain_p = parseFloat(params.p)
						if (params.control == 0) {
							_this.hasfrom = false
						} else {
							_this.hasfrom = true
						}

						_this.searchList(true)
						// })
						break
					case 'noanimation':
						_this.animation = false
						break

					case 'start':
						// _this.closetips = true
						if (_this.loadingCompleted) {
							_this.$nextTick(() => {
								_this.loadingjz = false
								_this.chartDetial()
							})
						} else {
							_this.getDetialcomplete()
						}

						break
					case 'close':
						// _this.closetips = false
						_this.$nextTick(() => {
							_this.rain_p = ''
							_this.type = ''
							if (_this.myChart != '') {
								_this.myChart.clear()
							}
						})
						break
				}

			},
			choosetype() {
				var _this = this
				if (this.type == 2) {
					this.choosep = JSON.parse(JSON.stringify(this.allp))
				} else {
					this.choosep = JSON.parse(JSON.stringify(this.allp_jls))
				}
				this.$nextTick(() => {
					_this.rain_p = ''
					_this.loadchart = !_this.loadchart
					if (_this.myChart != '') {
						_this.myChart.clear()
					}
				})



				// this.choosehs = true
			},
			//获取详
			getDetial() {
				var _this = this
				// axios({
				// 	headers: {
				// 		'Access-Control-Allow-Origin': '*',
				// 		withCredentials: true
				// 	},
				// 	method: 'get',
				// 	url: _this.type == 2 ? 'https://mahe.jnaw.top/floodprobability/' + _this.rain_p + '/6' :
				// 		'https://mahe.jnaw.top/runoff/' + _this.rain_p + '/6',
				// }).then(res => {
				// 	var datalist = res.data
				// 	_this.rainstormList = JSON.parse(JSON.stringify(datalist))
				// 	_this.loadingCompleted = true

				// }).catch(err => {

				// })

				console.log('======', _this.type, _this.rain_p)
				var datas = {
					type: _this.type,
					p: _this.rain_p
					// type:2,
					// p:10
				}
				_this.$apis.storageCurveGetLevel(datas).then(res => {
					if (res.result == 0) {
						var datalist = res.data
						_this.rainstormList = JSON.parse(JSON.stringify(datalist))
						_this.loadingCompleted = true
					}

				}).catch(err => {

				})


			},
			//获取详
			getDetialcomplete() {
				var _this = this
				// axios({
				// 	headers: {
				// 		'Access-Control-Allow-Origin': '*',
				// 		withCredentials: true
				// 	},
				// 	method: 'get',
				// 	url: _this.type == 2 ? 'https://mahe.jnaw.top/floodprobability/' + _this.rain_p + '/6' :
				// 		'https://mahe.jnaw.top/runoff/' + _this.rain_p + '/6',
				// 	// data: JSON.stringify(params)
				// }).then(res => {


				// }).catch(err => {

				// })
				console.log('======', _this.type, _this.rain_p)
				var datas = {
					type: _this.type,
					p: _this.rain_p
					// type:2,
					// p:10
				}
				_this.$apis.storageCurveGetLevel(datas).then(res => {
					if (res.result == 0) {
						var datalist = res.data
						_this.rainstormList = JSON.parse(JSON.stringify(datalist))
						_this.$nextTick(() => {
							this.loadingjz = false
							_this.chartDetial()
						})
					}

				}).catch(err => {

				})


			},
			chartDetial(item) {
				var _this = this
				if (_this.myChart != '') {
					_this.myChart.clear()
				}
				// 基于准备好的dom，初始化echarts实例  这个和上面的main对应
				_this.myChart = this.loadchart ? this.$echarts.init(_this.$refs.main1) : this.$echarts.init(_this.$refs
					.main2)

				// console.log(myChart)
				var item = _this.rainstormList
				// console.log(11)
				// 指定图表的配置项和数据
				// console.log(item)
				let option = {
					//调整此处大小即可控制空白
					grid: {
						x: 20,
						y: 35,
						x2: 20,
						y2: 15,
						containLabel: true,
						bottom: 10

					},
					legend: {
						// data: _this.ifrain ? ['瞬时雨量', '总降雨量'] : ['瞬时洪水量', '总洪水量'],
						data: ['洪水过程线', '水位', ],
						textStyle: {
							// fontSize: 18,//字体大小
							color: '#ffffff', //字体颜色
						}


					},
					xAxis: {
						// name: 'h',
						//  nameLocation:'start',
						nameTextStyle: {
							color: 'rgba(255, 255, 255, 1)',
						},
						// nameGap:'20',
						type: "category",
						// boundaryGap: true,
						// data: _this.ifrain? item.rain_time:item.flood_time,
						data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
							25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46,
							47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68,
							69, 70, 71, 72
						],
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "rgba(255, 255, 255, 1)"
							}
						},
						axisLabel: {
							color: "rgba(255, 255, 255,1)",
							// rotate: 40,
							//x轴间隔显示
							interval: 'auto'
						},

					},
					dataZoom: [
						// {
						// 	type: "slider", //滑动条型数据区域缩放组件
						// 	realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
						// 	start: 0, //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
						// 	//              end: 100,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
						// 	height: 100,
						// 	endValue: 66, //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
						// 	fillerColor: "rgba(255, 255, 255, 0)", // 滚动条颜色
						// 	borderColor: "rgba(255, 255, 255, 0)",
						// 	handleSize: 0, // 两边手柄尺寸
						// 	showDetail: false, // 拖拽时是否展示滚动条两侧的文字
						// 	top: "96%", //组件离容器上侧的距离
						// 	zoomLock: true // 是否只平移不缩放
						// 	// moveOnMouseMove:true, //开启鼠标移动窗口平移
						// 	// zoomOnMouseWheel :true, //开启鼠标滚轮缩放
						// },
						// {
						// 	type: "inside", //内置型数据区域缩放组件
						// 	// start: 0,
						// 	//              end: 100,
						// 	endValue: 24, // 最多12个
						// 	zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
						// 	moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
						// 	moveOnMouseMove: true // 开启鼠标移动窗口平移
						// }
					],
					yAxis: [{
							type: "value",
							// name: "m",
							// boundaryGap:true,
							name: 'm³/s',
							nameTextStyle: {
								color: "rgba(255, 255, 255, 1.0)"
							},
							// splitNumber: 4,
							axisTick: {
								show: false
							},
							axisLine: {
								// onZero:true,
								lineStyle: {
									color: "rgba(255, 255, 255, 1.0)"
								},

							},

							splitLine: {
								show: true,
								lineStyle: {
									color: ["#ccc"],
									width: 1,
									type: "dashed"
								}
							},
							axisLabel: {
								color: "rgba(255, 255, 255, 1.0)",
							}
						},
						{
							type: "value",
							// boundaryGap:true,
							// scale :true,
							// name: "m",
							name: 'm',
							nameTextStyle: {
								color: "rgba(255, 255, 255, 1.0)"
							},
							// splitNumber: 4,
							axisTick: {
								show: false
							},
							axisLine: {
								// onZero:true,
								lineStyle: {
									color: "rgba(255, 255, 255, 1.0)"
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: ["#ccc"],
									width: 1,
									type: "dashed"
								}
							},
							axisLabel: {
								color: "rgba(255, 255, 255, 1.0)",
							}
						},

					],
					// grid: { bottom: 30},// 调整底部空白，确保Y轴网格线不覆盖X轴,


					tooltip: {
						// trigger: "item"
						trigger: "axis",
						// formatter: function(param) {
						// 	// console.log(param[0]);
						// 	var value = param[0];
						// 	return (
						// 		'<div style="font-size: 16px;"> ' +
						// 		value.name +
						// 		"：" +
						// 		value.value +
						// 		unit +
						// 		"</div>"
						// 	);
						// }
						axisPointer: {
							type: 'line'
						}
					},
					toolbox: {
						// feature: {
						//   dataView: { show: true, readOnly: false },
						//   magicType: { show: true, type: ['line', 'bar'] },
						//   restore: { show: true },
						//   saveAsImage: { show: true }
						// }
					},

					label: {
						show: false,
						position: "bottom",
						textStyle: {
							fontSize: 20
						}
					},
					textStyle: {
						color: "#000"
					},

					series: [{
							type: "line",
							name: '洪水过程线',
							// barGap: 0,
							color: ["#5470C6"],
							symbolSize: 0,
							data: item.gcx,
							yAxisIndex: 0,
							smooth: true,
							lineStyle: {
								color: '#5470C6',
								width: 3,
								type: 'solid'
							},
							animation: !_this.hasfrom,
							animationDuration: _this.animation ? 20000 : 1,
							animationEasing: "linear",


						},
						{
							type: "line",
							name: '水位',
							// barGap: 0,
							color: ["#00ff00"],
							symbolSize: 0,
							data: item.level,
							yAxisIndex: 1,
							smooth: true,
							lineStyle: {
								color: '#00ff00',
								width: 3,
								type: 'solid'
							},
							animation: !_this.hasfrom,
							animationDuration: _this.animation ? 20000 : 1,
							animationEasing: "linear",

						},
						// {
						// 	type: "line",
						// 	name: '水位',
						// 	// barGap: 0,
						// 	color: ["#ff0000"],
						// 	symbolSize: 0,
						// 	data: item.level,
						// 	smooth: true,
						// 	yAxisIndex: 0,
						// 	lineStyle: {
						// 		color: '#ff0000',
						// 		width: 3,
						// 		type: 'solid'
						// 	},
						// 	animation: !_this.hasfrom,
						// 	animationDuration: _this.animation ? 20000 : 1,
						// 	animationEasing: "linear",


						// },

					]
				};
				_this.myChart.on('legendselectchanged', (e) => {
					// console.log(e)
					let yAxisArr = e.selected
					let zhs = yAxisArr['水位']
					let gcx = yAxisArr['洪水过程线']

					if (zhs && !gcx) {
						option.yAxis[0].splitLine.show = false
						option.yAxis[1].splitLine.show = true
					} else {
						option.yAxis[0].splitLine.show = true
						option.yAxis[1].splitLine.show = false
					}

					option && _this.myChart.setOption(option);

				})



				// 使用刚指定的配置项和数据显示图表。
				option && _this.myChart.setOption(option);
			},
			searchList(option) {
				var _this = this
				this.$nextTick(() => {
					// let chart = this.$refs.main1.getEchartsInstance()
					// chart.clear()
					_this.loadingjz = true
					_this.loadchart = !_this.loadchart
					if (_this.myChart != '') {
						_this.myChart.clear()
					}
					_this.rainstormList = {

					}
					_this.operationTips = true

					let datas = {
						type: this.type,
						p: this.rain_p
					}
					UnityIm.loadChart('type', datas)
					if (option == true) {
						console.log(1)
						_this.getDetialcomplete()
					} else {
						console.log(2)
						_this.getDetial()
					}

					// this.$forceUpdate()

				})


				// this.loadchart = true

			},
			// openlist(){

			// },
			changeDate(item) {
				this.ifrain = item
				// sconsole.log(11)
				this.$nextTick(() => {
					this.chartDetial()
				})
			},
			toClose() {
				UnityIm.closePanelManager('rainsstorm');
			},
			opentips() {
				this.operationTips = true
			},
			Closetips() {
				this.operationTips = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../assets/css/unity.scss');
	@import url('https://dongping.jnaw.top/demo/index.css');


	.unity-body-div {
		padding: 0px;
		display: flex;
		flex-direction: column;

		/*background: rgba(5, 15, 26, 0.5) !important;*/
	}


	.unity-body-center {
		margin-top: 0px;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// padding: 11px 6.8vw;
		// border: 1px solid rgba(255, 255, 255, 0.6);
		// overflow: hidden;
		// height: 100%;


	}

	.height_video {

		height: calc(100vh - 179px) !important;
		width: 82vw !important;
		;
	}

	.height_video_all {
		position: absolute !important;
		left: 0;
		top: 0;
		padding: 0;
		margin: 0;
		height: 100vh !important;
		width: 100vw !important;
		;
	}

	.unity-body-center-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 4.6vw;
		position: relative;
		height: 35px;

	}

	.toleft {
		justify-content: flex-start;
	}

	.unity-body-center-left-top {
		// margin: 0 auto;
		display: flex;
		// flex-direction: column;
		align-items: center;

		font-size: 18px;
		font-family: siyuan_bold;
		font-weight: 500;
		color: #ffffff;
	}

	.color-gradient-blue_device {
		// /*主色调 */
		// background: #3083ff;
		// /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #3083ff), color-stop(1, #2dc1ff));
		// /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
		// /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
		// /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -o-linear-gradient(left, #3083ff, #2dc1ff);
		// /*filter:滤镜名（参数)*/
		// filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
		// -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
		background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%);
	}


	table {
		width: 100%;
		height: 100%;
		// border: 1px solid #000;
		// border: 1px dashed #000;
		border-collapse: collapse;


	}

	td {
		align-items: center;
		// text-align: center;
		padding-left: 10vw;
		font-size: 14px;
		color: #fff;
		width: 50%;
	}

	.td1 {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
		border-right: 1px dashed rgba(255, 255, 255, 0.6);

	}

	.td2 {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
		border-left: 1px dashed rgba(255, 255, 255, 0.6);

	}

	.unity_close {


		position: absolute;
		top: 25px;
		right: 25px;

		i {
			font-size: 40px;
			color: #fff;
		}
	}

	.operate {
		display: flex;
		align-items: center;
		font-size: 18px;
		color: #fff;
		z-index: 999999
	}

	.operate_picture {
		display: flex;
		align-items: center;

		i {
			font-size: 28px;
			margin-right: 1.1vw;

		}


	}

	.operate_gang {
		width: 1px;
		background-color: #fff;
		height: 26px;
		margin: 0 2.1vw;
	}

	.unity_close_two {
		color: #fff;
		z-index: 9999;

		i {
			position: relative;
			padding-right: 10px;
			font-size: 40px;
		}
	}

	.posi_title {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.chart {
		// margin-top: 40px;
		width: 100%;
		height: 180px;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.chart2 {
		width: 100%;
		height: 200px;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.change_date {
		position: absolute;
		right: 0px;
		top: 9px;
		display: flex;
		z-index: 9999999999
	}

	.choosedate {
		width: 60px;
		height: 24px;
		margin-right: 9px;
		border-radius: 2px;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(37deg, #2DC1FF 0%, #3083FF 99%);
	}

	.change_date_item {
		width: 60px;
		height: 24px;
		margin-right: 9px;
		border: 1px solid #0083FD;
		border-radius: 2px;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.allbutton {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
</style>
<style>
	.selseclass {
		/* max-height: 200px;
		overflow-y: auto; */
	}

	.selseclass .el-select-dropdown__item {
		height: 30px;
		line-height: 30px;
	}

	.selseclass::-webkit-scrollbar {
		width: 0px;
		height: 0px;
	}

	.el-loading-text {
		color: #fff !important;
		font-size: 18px !important;
	}

	.circular {
		display: none !important;
	}

	.el-select-dropdown {
		background-color: rgba(0, 0, 0, 0.6) !important;
		border: 1px solid #BFBFBF;
	}

	.el-select-dropdown__item {
		color: #FFFFFF !important;

	}

	.el-select-dropdown__item.hover {
		background-color: rgba(255, 255, 255, 0.3) !important;
	}

	.rain .el-form--inline .el-form-item__label {
		color: #FFFFFF !important;
	}

	.rain .el-form--inline .el-input__inner {
		height: 35px !important;
		/* width:140px !important ; */
		background-color: transparent;
		border-color: #FFFFFF;
		color: #FFFFFF;
	}

	.rain .el-input.is-disabled .el-input__inner {
		background-color: rgba(0, 0, 0, 0.3) !important;
		height: 35px !important;

	}

	.rain .el-form-item__content {
		line-height: 0px !important;
	}
</style>
